
((querySelector)=>{
//
let toolbar,viewSelect,viewSelectValue,gameDiv,options
const devices={
    "Default": {
        "name": "设计分辨率",
        "width": 750,
        "height": 1334,
        "ratio": 1
    },
    "FullScreen": {
        "name": "全屏"
    },
    "WebpageFullScreen": {
        "name": "网页全屏"
    },
    "separator": {
        "name": "separator"
    },
    "iPhone SE": {
        "name": "iPhone SE",
        "width": 375,
        "height": 667,
        "ratio": 2
    },
    "iPhone XS Max": {
        "name": "iPhone XS Max",
        "width": 414,
        "height": 896,
        "ratio": 3
    },
    "iPhone XS": {
        "name": "iPhone XS",
        "width": 375,
        "height": 812,
        "ratio": 3
    },
    "iPhone XR": {
        "name": "iPhone XR",
        "width": 414,
        "height": 896,
        "ratio": 2
    },
    "iPhone 8 Plus": {
        "name": "iPhone 8 Plus",
        "width": 414,
        "height": 736,
        "ratio": 2.6
    },
    "iPhone 8": {
        "name": "iPhone 8",
        "width": 375,
        "height": 667,
        "ratio": 2
    },
    "Galaxy S9 Plus": {
        "name": "Galaxy S9 Plus",
        "width": 412,
        "height": 846,
        "ratio": 3.5
    },
    "Galaxy S9": {
        "name": "Galaxy S9",
        "width": 360,
        "height": 740,
        "ratio": 4
    },
    "Galaxy S7": {
        "name": "Galaxy S7",
        "width": 360,
        "height": 640,
        "ratio": 4
    },
    "Huawei P20 Lite": {
        "name": "Huawei P20 Lite",
        "width": 360,
        "height": 760,
        "ratio": 3
    },
    "Huawei P20 Pro": {
        "name": "Huawei P20 Pro",
        "width": 360,
        "height": 747,
        "ratio": 3
    },
    "Huawei P20": {
        "name": "Huawei P20",
        "width": 360,
        "height": 748,
        "ratio": 3
    },
    "Huawei P10": {
        "name": "Huawei P10",
        "width": 360,
        "height": 640,
        "ratio": 3
    },
    "Moto Z2": {
        "name": "Moto Z2",
        "width": 360,
        "height": 640,
        "ratio": 4
    },
    "Redmi Note 5": {
        "name": "Redmi Note 5",
        "width": 393,
        "height": 786,
        "ratio": 2.75
    },
    "Redmi Note 4": {
        "name": "Redmi Note 4",
        "width": 360,
        "height": 640,
        "ratio": 3
    },
    "Pixel 3 XL": {
        "name": "Pixel 3 XL",
        "width": 393,
        "height": 786,
        "ratio": 3.67
    },
    "Pixel 2 XL": {
        "name": "Pixel 2 XL",
        "width": 412,
        "height": 823,
        "ratio": 3.5
    },
    "Pixel 2": {
        "name": "Pixel 2",
        "width": 412,
        "height": 640,
        "ratio": 2.6
    },
    "Nexus 6P": {
        "name": "Nexus 6P",
        "width": 412,
        "height": 732,
        "ratio": 3.5
    },"Nexus 6": {
        "name": "Nexus 6",
        "width": 360,
        "height": 640,
        "ratio": 4
    },"LG K20": {
        "name": "LG K20",
        "width": 360,
        "height": 640,
        "ratio": 2
    },"LG K7": {
        "name": "LG K7",
        "width": 320,
        "height": 570,
        "ratio": 1.5
    },"ZTE ZMAX Pro": {
        "name": "ZTE ZMAX Pro",
        "width": 360,
        "height": 640,
        "ratio": 3
    },"ZTE Majesty Pro": {
        "name": "ZTE Majesty Pro",
        "width": 320,
        "height": 570,
        "ratio": 1.5
    },"Z3":{
        "name": "分之道Z3平板",
        "width": 640,
        "height": 400,
        "ratio": 2
    }
}
const createTag=(tagName,className,text)=>{
    const el=document.createElement(tagName)
    el.className=className
    el.innerText=text
    return el
}
const createLI=(className,text,device)=>{
    const el=document.createElement("li")
    el.className=className
    el.innerText=text
    if(device){
        el.dataset.device=device
    }
    return el
}
const init=()=>{
    //console.log(querySelector.call(document,"#toolbar"))
    toolbar=querySelector("#toolbar")
    viewSelect=querySelector("#view-select")
    viewSelectValue=viewSelect.querySelector("#name")
    gameDiv=querySelector("#GameDiv")
    options=viewSelect.querySelector(".options")
    //console.log(options)
    
    viewSelect.addEventListener("click",function(e){
        e.stopPropagation()
        optionsSwitch()
    })
    document.addEventListener("click", function(e) {
        e.stopPropagation()
        if(options.hasAttribute("open")){
            options.removeAttribute("open")
        }
    })
    const selectList=viewSelect.querySelector(".options > ul")
    selectList.innerHTML=""
    Object.keys(devices).forEach((key)=>{
        const item=devices[key]
        switch (key) {
            case "Default":
                selectList.appendChild(createLI("",item.name,"Default"))
                break;
            case "FullScreen":
                selectList.appendChild(createLI("",item.name,"FullScreen"))
                break;
            case "WebpageFullScreen":
                selectList.appendChild(createLI("",item.name,"WebpageFullScreen"))
                break;
            case "separator":
                selectList.appendChild(createLI("separator"))
                break;
            default:
                selectList.appendChild(createLI("",item.name+" ("+item.width+"X"+item.height+")",key))
                break;
        }
    })
    selectList.addEventListener("click",function(e){
        const target=e.target
        if(target.tagName.toLowerCase()=="li"){
            const value=target.dataset.device
            console.log(value)
            viewSelectValue.innerText=value
            //options.removeAttribute("open")
            switch (value) {
                //case "Default":
                case "FullScreen":
                    document.fullscreenEnabled && !document.fullscreenElement && gameDiv.requestFullscreen();
                    break;
                case "WebpageFullScreen":
                    switchClassName(toolbar,"hide",false)
                    gameDiv.style.width=window.innerWidth+"px"
                    gameDiv.style.height=window.innerHeight+"px"
                    break;
                case "separator":
                    //selectList.appendChild(createLI("separator"))
                    break;
                default:
                    const device=devices[value]
                    gameDiv.style.width=device.width+"px"
                    gameDiv.style.height=device.height+"px"
                    break;
            }
            /*if ("FullScreen" === value){
                document.fullscreenEnabled && !document.fullscreenElement && gameDiv.requestFullscreen();
            }else{
                viewSelect.setAttribute("value", value)
                if(value==="WebpageFullScreen"){
                }else{
                }
            }*/
        }
    })
    const platform=getPlatformInfo()
    if(!(platform.isWindows||platform.isMac)){
        window.VConsole && (window.vConsole = new VConsole());
    }
    window.addEventListener('resize',onresize)
    onresize()
    //mousemove
    window.addEventListener('mousemove',onMouseMove)
    toolbar.addEventListener('mousemove',(e)=>{
        e.stopPropagation();
    })
}
const optionsSwitch=()=>{
    if(options.hasAttribute("open")){
        options.removeAttribute("open")
    }else{
        options.setAttribute("open","")
    }
}
//
const onresize=(e)=>{
//console.log(window.innerWidth,window.innerHeight)
const platform=getPlatformInfo()
if(platform.isWindows||platform.isMac){
    console.log('web desktop')
    switchClassName(toolbar,"hide",false)
    //vConsole.destroy();
}else if(platform.isAndroid||platform.isIphone||platform.isWeixin){
    console.log('web mobile')
    switchClassName(toolbar,"hide",true)
    gameDiv.style.width=window.innerWidth+"px"
    gameDiv.style.height=window.innerHeight+"px"
    //vConsole.showSwitch();
}else{
    console.log('web pad')
    switchClassName(toolbar,"hide",true)
    gameDiv.style.width=window.innerWidth+"px"
    gameDiv.style.height=window.innerHeight+"px"
    //vConsole.showSwitch();
}
}
const getPlatformInfo=()=>{
    const ua = navigator.userAgent.toLowerCase();
const platform = {};
const MAP_EXP = {
    Weixin: /micromessenger/i,
    Mac: /(mac os x)\s+([\w_]+)/,
    Windows: /(windows nt)\s+([\w.]+)/,
    Ios: /(i(?:pad|phone|pod))(?:.*)cpu(?: i(?:pad|phone|pod))? os (\d+(?:[\.|_]\d+){1,})/,
    Android: /(android)\s+([\d.]+)/,
    Ipad: /(ipad).*os\s([\d_]+)/,
    Iphone: /(iphone\sos)\s([\d_]+)/,
};
for (let key in MAP_EXP) {
    const uaMatch = ua.match(MAP_EXP[key]);
    platform[`is${key}`] = !!uaMatch;
    if (!!uaMatch && !platform.version) {
        platform.version = key === 'Ios' ? uaMatch[2].replace(/_/g, '.') : uaMatch[2];
    }
}
return platform;
}
const switchClassName=(e, t, i)=>{
    (void 0 === i ? !e.classList.contains(t) : i) ? e.classList.add(t) : e.classList.remove(t)
}
const onMouseMove=(e)=>{
    //console.log(viewSelectValue.innerText)
    if(viewSelectValue.innerText=="WebpageFullScreen"){
        const t = gameDiv.getBoundingClientRect();
        //console.log(e.clientY,t.top)
        const r=switchClassName;
        if(e.clientY <= t.top + 50 && e.clientY >= t.top){
            r(toolbar, "hide", !1)
            gameDiv.style.height=(window.innerHeight-50)+"px"
        }else{
            r(toolbar, "hide", !0)
            gameDiv.style.height=window.innerHeight+"px"
        }
        /*if(toolbar.style.display=="flex"){
            gameDiv.style.height=(window.innerHeight-50)+"px"
        }else{
            gameDiv.style.height=window.innerHeight+"px"
        }*/
    }
}
document.addEventListener('readystatechange',()=>{
    if(document.readyState=="complete"){
        //console.log(querySelector)
        init()
    }
})
})(document.querySelector.bind(document))